<template>
   <div class="lotterydetail">
        <wxc-minibar title="开奖详情">
            <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
            <text slot="middle" style="font-family: PingFangSC-Medium;font-size: 34px;color: #fff;">开奖详情</text> -->
            <image slot="right" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/draw-detail.png" class="right-button" @click="gohistorylist()" ></image>
        </wxc-minibar>
      <scroller class="scroller" style="position:fixed;top:100px;bottom:0;left:0;right:0;">
      <div class="lotterynumber">
         <div class="lottery_desc">
           <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" v-if="id==1">双色球</text>
           <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" v-if="id==2">超级大乐透</text>
           <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" v-if="id==3">福彩3D</text>
           <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" v-if="id==4">排列三</text>
           <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" v-if="id==5">排列五</text>
           <text style="font-size: 28px;color: #666666;margin-left:24px;margin-right:24px;">第{{issue}}期</text>
           <text style="font-size: 28px;color: #666666;">{{drawtime|filtertime}}</text>
         </div>
         <div class="lottery_first_ball">
             <div :class="[item.lottery_id==1||item.lottery_id==2?'bGroup':'bGroup1']">
                  <div class="betone-numbers-bGroup-forward" v-for="(item1,index) in forward" :key="index+1/4">
                      <image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/redBall.png"></image>
                      <text class="betone-numbers-bGroup-span-t">{{item1}}</text>
                  </div>
                  <div class="betone-numbers-bGroup-forward" v-for="(item1,index) in backward" :key="index+1/5">
                      <image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/blueBall.png"></image>
                      <text class="betone-numbers-bGroup-span-t">{{item1}}</text>
                  </div>
                <!-- <text :class="[item.lottery_id==1||item.lottery_id==2?'forward':'forward1']"  v-for="(item1,index) in forward" :key="index+1/4">{{item1}}</text>
                <text class="backward" v-for="(item2,index) in backward" :key="index+1/5">{{item2}}</text> -->
             </div>
         </div>
      </div>
      <div class="description">
        <div class="desc_fl">
          <text style="font-size: 28px;color: #B2B2B2;">全国销量</text>
          <text style="font-family: Helvetica;font-size: 40px;color: #000000;margin-top:16px;">{{sell}}元</text>
        </div>
        <div class="desc_md"></div>
        <div class="desc_fr">
          <text style="font-size: 28px;color: #B2B2B2;">奖金累计</text>
          <text style="font-family: Helvetica;font-size: 40px;color: #000000;margin-top:16px;">{{pool}}元</text>
        </div>
      </div>
      <div class="detaillist">
         <div class="detaillist_title">
           <div class="detaillist_title_item" style="width:250px;"><text style="font-size: 28px;color: #666666;">奖项</text></div>
           <div class="detaillist_title_item" style="width:250px;"><text style="font-size: 28px;color: #666666;">中奖注数(注)</text></div>
           <div class="detaillist_title_item" style="width:250px;"><text style="font-size: 28px;color: #666666;">奖金(元)</text></div>
         </div>
         <div class="detaillist_title" style="margin-top:24px;margin-bottom:24px;" v-for="(i,index) in lotterylist" :key="index">
           <div class="detaillist_title_item" style="width:250px;">
             <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #444444;">{{i.level}}</text>
           </div>
           <div class="detaillist_title_item" style="width:250px;"><text style="font-family: PingFangSC-Medium;font-size: 28px;color: #444444;">{{i.zhushu}}</text></div>
           <div class="detaillist_title_item" style="width:250px;"><text style="font-family: PingFangSC-Medium;font-size: 28px;color: #444444;">{{i.moneytotal}}</text></div>
         </div>
      </div>
      </scroller>
   </div>
</template>

<script>
const modal = weex.requireModule("modal");
let navigator = weex.requireModule("navigator");
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { getResponse, testapi } from "@/api.js";
import { serialize, getBaseUrl, jsonAnalysis } from "@/utils/index.js";
var sxglobalEvent = weex.requireModule("globalEvent");
export default {
	data() {
		return {
			pool: {},
			sell: {},
			lotterylist: [],
			id: "",
			issue: "",
			title: "",
			item: "",
			forward: "",
			backward: "",
			baseURL: "",
			drawtime: ""
		};
	},
	filters: {
		filtertime(time) {
			let iarr = ['周日','周一','周二','周三','周四','周五','周六']
			let date = new Date(+time)
			
			let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

			return `${ date.getFullYear() }-${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())} ${iarr[date.getDay()]}`
		},
	},
  created() {
    this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
    let personalDetails = jsonAnalysis(
      weex.config.bundleUrl.split("?")[1]
    );
    
    


    this.id = personalDetails.id;
    this.issue = personalDetails.issue;
    this.drawtime = personalDetails.drawtime;
    this.forward = personalDetails.forward.split(",");
    this.backward = personalDetails.backward ? personalDetails.backward.split(","): ''

    
    this.prize = JSON.parse(personalDetails.prize)
    this.sell  = this.prize['sell']
    this.pool  = this.prize['pool']
    console.log(personalDetails)

    console.log(this.prize)
    
    if(this.id == 2){ //超级大乐透
		var lotteryarr = [];
		this.prize.prize_list.forEach((item,index)=>{
            var lotteryobj1={}
            var lotteryobj2={}
            lotteryobj1.level = item[0].name;
            lotteryobj1.moneytotal = item[0].point;
            item.forEach((item1,index1)=>{
              if(item1.name=="中奖注数"){
                lotteryobj1.zhushu=item1.point
              }
              if(item1.name=="追加"){
                lotteryobj2.level=item[0].name+"追加";
                lotteryobj2.moneytotal=item1.point;
              }
              if(item1.name=="中奖注数"&&item[0].name !='六等奖'){
                lotteryobj2.zhushu=item1.point;
              }
            })
            lotteryarr.push(lotteryobj1);
            lotteryarr.push(lotteryobj2)
            this.lotterylist = lotteryarr
		})
	}
	if (this.id == 1) { //双色球
		var lotteryarr = [];
		this.prize.prize_list.forEach((item,index)=>{
             var moneytotal = 0;
             let lotteryobj = {};
             item.forEach((item1,index1)=>{
                 if (item1.name.indexOf("等奖") > -1) {
                    if(item1.name == '一等奖'){
                        lotteryobj.level = '一等奖'
                    } else if(item1.name == '二等奖'){
                      lotteryobj.level = '二等奖'
                    } else if(item1.name == '三等奖'){
                        lotteryobj.level = '三等奖'
                    } else if(item1.name == '四等奖'){
                        lotteryobj.level = '四等奖'
                    } else if(item1.name == '五等奖'){
                        lotteryobj.level = '五等奖'
                    } else if(item1.name == '六等奖'){
                        lotteryobj.level = '六等奖'
                    }
                    moneytotal = Number(item1.point) + moneytotal;
                  }
                  if (item1.name == "加奖") {
                    moneytotal = Number(item1.point) + moneytotal;
                  }
                  if (item1.name == "中奖注数") {
                    lotteryobj.zhushu = item1.point;
                  }
             })
              lotteryobj.moneytotal = moneytotal;
              lotteryarr.push(lotteryobj)
              this.lotterylist = lotteryarr
          })

        }
        if (this.id == 3 ||this.id == 4 ||this.id == 5) {
           var lotteryarr = [];
           this.prize.prize_list.forEach((item,index)=>{
             let lotteryobj = {};
             item.forEach((item1,index1)=>{
                    if(index1==0){
                       lotteryobj.level = item[index1].name
                       lotteryobj.moneytotal = item[index1].point
                    }
                    if(index1==1){
                      lotteryobj.zhushu =item[index1].point
                    }
             })
              lotteryarr.push(lotteryobj)
              this.lotterylist = lotteryarr
          })
        }

   
  },
  components: {
    WxcMinibar
  },
  methods: {
    gohistorylist() {
      navigator.push({
        url:this.baseURL + "views/drawLottery/historylist.js?" +  serialize({ id: this.id}),
        animated: "true"
      });
    },
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    }
  }
};
</script>
<style scoped>
.lotterydetail {
  position: absolute;
  background-color: #ffffff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.lotterynumber {
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 39px;
  background-color: white;
}
.lottery_desc {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bGroup {
  padding: 24px 16px 32px 16px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.bGroup1{
  padding: 24px 16px 32px 16px;
  display: flex;
  flex-direction: row;
}
.forward1{
  background-color: #e70d0d;
  color: #fff;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-right: 34px;
}
.forward {
  background-color: #e70d0d;
  color: #fff;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


.detaillist_title {
  display: flex;
  flex-direction: row;
  margin-top: 45px;
}
.detaillist_title_item {
  display: flex;
  align-items: center;
}
.description {
  position: relative;
  background-color: #f5f5f5;
  width: 750px;
  height: 160px;
  display: flex;
  flex-direction: row;
}
.desc_fl {
  width: 375px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.desc_md {
  width: 2px;
  height: 100px;
  background-color: #d1d1d1;
  position: absolute;
  top: 30px;
  left: 375px;
  margin-left: -1px;
}
.betone-numbers-bGroup-forward {
   width: 64px;
   height: 64px;
   margin-right:15px;
   margin-left:15px;
   justify-content: center;
   align-items: center;
   align-self:center;
   position: relative;
}
.betone-numbers-bGroup-span-t {
  font-size: 32px;
  width:64px;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.betone-numbers-bGroup-span {
  height: 64px;
  width: 64px;
  position: absolute;
  top: 0;
  border-radius: 50px;
}
.desc_fr {
  width: 375px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header {
  box-shadow: 0 4px 15px 0 rgba(229, 229, 229, 0.5);
  width: 750px;
  margin-bottom: 10px;
  height: 90px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.right-button {
  width: 45px;
  height: 45px;
}
.header-img {
  position: absolute;
  left: 32px;
  top: 34px;
  margin-left: 0;
}
.border-bottom{
  border-bottom-color: #f1f1f1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
</style>